<template>
  <view class="comdetailPage">
    <!-- 标题 -->
    <shopro-navbar
      back-icon-color="#020202"
      :background="{ background: '#fff' }"
      @backHandler="goBack"
      :backTextStyle="{
        color: '#020202',
        fontSize: '36rpx',
        fontWeight: '400',
      }"
      :isBack="true">
      <view slot="content" class="u-flex nav-wrap">
        <view class="nav-item">详情</view>
      </view>
    </shopro-navbar>
    <!-- <view class="card">
      <view class="cardTop">
        <image class="imgs" :src="detajs.image" mode="widthFix"></image>
        <view>
          <view class="cardright">
            <view class="name">{{ detajs.name }}</view>
          </view>
        </view>
      </view>
      <view class="introduce">
        {{ detajs.desc }}
      </view>
    </view>

    <view class="classification">
      <view class="classificationTitle">
        <view class="leftline"></view>
        课程分类
      </view>
      <u-tabs
        :list="list"
        :is-scroll="true"
        :current="current"
        @change="change"
        inactive-color="#666666"
        active-color="#000"
        class="tab"
        :bar-style="{ background: '#ED861F' }"></u-tabs>
      <view class="financeTitle">
        <text>精品课程</text>
        
      </view>
    </view>
    <view class="moreContent">
      <view class="empty" v-if="coursedata.length == 0">
        <u-empty text="暂无数据" mode="list"></u-empty>
      </view>
      <view
        class="moreList"
        v-for="(item, index) in coursedata"
        :key="index"
        @click="handleDetail(item)">
        <image
          class="imgs"
          src="/static/images/finance/bofang.png"
          v-if="item.is_fav == '1'"></image>
        <image
          class="imgs"
          src="/static/images/finance/bofangs.png"
          v-if="item.is_fav == '0'"></image>
        <view class="moreRight">
          <view class="name">
            {{ item.title }}
            <view class="nameright" v-if="item.is_buy == 1">
              <image
                v-if="item.is_fav == 1"
                class="shoucang"
                @click="getStatus"
                src="/static/images/finance/shoucang.png"
                mode="widthFix"></image>
              <image
                v-if="item.is_fav == 0"
                class="shoucang"
                @click="getStatus"
                src="/static/images/finance/quxiaoshoucang.png"
                mode="widthFix"></image>

              已购买
            </view>
            <view class="nameright" v-if="item.is_buy == 0">
              <image
                v-if="item.is_fav == 1"
                class="shoucang"
                @click="getStatus"
                src="/static/images/finance/shoucang.png"
                mode="widthFix"></image>
              <image
                v-if="item.is_fav == 0"
                class="shoucang"
                @click="getStatus"
                src="/static/images/finance/quxiaoshoucang.png"
                mode="widthFix"></image>
              <image
                class="suo"
                src="/static/images/finance/suo.png"
                mode="widthFix"></image>
            </view>
          </view>
         
        </view>
      </view>
    </view> -->
    <view class="box_5 flex-col u-p-b-40">
      <view class="box_2 flex-col"></view>
      <view
        class="flex-row justify-between"
        style="
          width: 100%;
          line-height: 36px;
          display: flex;
          align-items: center;
        ">
        <view
          @click="select(1)"
          :class="active == 1 ? 'active text_4' : 'text_4'">
          公司介绍
        </view>
        <view
          @click="select(2)"
          :class="active == 2 ? 'active text_4' : 'text_4'">
          团队介绍
        </view>
        <view
          @click="select(3)"
          :class="active == 3 ? 'active text_4' : 'text_4'">
          商品介绍
        </view>
      </view>
      <zhuanjia :expert="expert" v-show="active == 2"></zhuanjia>
      <goods :goodslist="goods" v-show="active == 3"></goods>
      <view v-show="active == 1">
        <view class="image-wrapper_1 flex-col">
          <video
            v-if="form.file"
            style="width: 100%"
            :src="form.file"
            autoplay="true"
            enable-danmu
            danmu-btn
            controls="false"></video>
          <!-- <image v-else :src="form" referrerpolicy="no-referrer"  /> -->
        </view>
		<view class="text_6" style="margin-left:28rpx">公司名称： {{ form.project_name }}</view>
        <view class="box_6 flex-row justify-between flex at">
		
          <view class="text_8">地址： {{ form.address }}</view>
		  
          <view class="group_3 flex-row">
            <view
              @click="gomap"
              class="image-text_2 flex-row justify-between flex at">
              <text class="text-group_1">导航</text>
              <image
                class="image_4"
                referrerpolicy="no-referrer"
                src="@/static/dh.png" />
            </view>
          </view>
        </view>
		 <!-- <view class="companyType" v-html="form.project_content"></view> -->
        <view class="text_7 u-m-r-20">
<!--          <rich-text :nodes="form.project_content"></rich-text>-->
	        <u-parse class="introduce" :html="form.project_content"></u-parse>
          <!-- {{form.project_desc}} -->
        </view>
      </view>
      <!-- </view> -->
    </view>
  </view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
import zhuanjia from "./zhuajia.vue";
import goods from "./goods.vue";
export default {
  components: {
    zhuanjia,
    goods,
  },
  data() {
    return {
      title: "",
      list: [
        {
          name: "金融课",
        },
        {
          name: "文化课",
        },
      ],
      current: 0,
      collect: true,
      show: false,
      currId: 0,
      detajs: {},
      cate_id: "",
      id: "",
      coursedata: [],
      vipData: [],
      selectval: "",
      // 服用
      goods: [],
      constants: {},
      active: 1,
      form: {},
      expert: {},
      jectId: "",
      location: "",
    };
  },
  props: {},
  onLoad(options) {
    this.id = options.val;
    this.getlist(options.val);
    this.jectId = options.val;
    // this.getDetail(options.val);
  },
  computed: {},
  created() {},

  methods: {
    select(e) {
      this.active = e;
    },
    change(index) {
      this.current = index;
      this.cate_id = this.list[index].cate_id;
      this.getDetail();
    },
    getlist(e) {
      this.$new_http("finance.companyDetail", {
        id: e,
      }).then((res) => {
        console.log(res);
        this.form = res.data;
        this.expert = res.data.expert_list;
        this.goods = res.data.goodslist;
        this.location = res.data.location;
      });
    },
	gomap() {
		console.log(this.location)
		uni.openLocation({
			longitude: this.location.lng,
			latitude: this.location.lat,
			name: "", //地址名称
			address: this.form.address, //详细地址名称
			success: function() {
				console.log("导航成功");
			},
			fail: function(error) {
				console.log(error);
			},
		});
	},
    getDetail(id) {
      this.$new_http("finance.teachDetail", {
        id: this.id,
        cate_id: this.cate_id,
      }).then((res) => {
        this.detajs = res.data.teach;
        this.list = res.data.cate;
        this.coursedata = res.data.course;
      });
    },
    getClassList() {
      this.$new_http("finance.teachDetail", {
        id: this.id,
        cate_id: this.cate_id,
      }).then((res) => {
        console.log(res.data, 888);
      });
    },
    handleDetail(val) {
      if (val.is_buy == "0") {
        uni.navigateTo({
          url: "/pages/finance/detail?id=" + val.id + "&cId=" + this.cate_id,
        });
      } else {
        uni.navigateTo({
          url: "/pages/finance/playback?id=" + val.id,
        });
      }
    },
    // 查看更多
    goMore(val) {
      uni.navigateTo({
        url: "/pages/finance/more?type=" + val,
      });
    },
    getStatus() {
      this.collect = !this.collect;
    },
    // 成为会员
    gocome(index, val) {
      this.currId = index;
      this.selectval = val;
    },
    handsubmit() {
      let leaveMsg = {
        title: this.detajs.name,
        price: this.detajs.price,
        cover: this.detajs.image,
      };

      uni.navigateTo({
        url: "/pages/finance/confirm?val=" + JSON.stringify(leaveMsg),
      });
    },
    // 会员列表
    getvipList() {
      this.show = true;
      this.$new_http("finance.vipList").then((res) => {
        this.vipData = res.data;
      });
    },
  },
};
</script>

<style lang="scss">
.comdetailPage {
  background: #fff;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	height: 100%;
  .nav-wrap {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    width: 100%;
	  font-size: 32rpx;
  }

  .box_5 {
    width: 100%;
    margin-top: 30rpx;
	  background:   #fff;
  }

  .box_2 {
    background-color: rgba(247, 247, 247, 1);
    /* width: 750rpx;
  height: 10rpx; */
  }

  .text-wrapper_3 {
    /* width: 602rpx;
  */
    height: 40rpx;
    margin: 30rpx 0 0 74rpx;
  }

  .active {
    width: 112rpx;
    height: 40rpx;
    color: rgba(237, 134, 31, 1) !important;
    font-weight: 500;
    line-height: 40rpx;
  }

  .text_4 {
    text-align: center;
    width: 33.3%;
    height: 40rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    font-weight: normal;
    /* text-align: right; */
    white-space: nowrap;
    line-height: 40rpx;
    /* margin-left: 133rpx; */
  }

  .text_5 {
    width: 112rpx;
    height: 40rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 133rpx;
  }

  .box_3 {
    background-color: rgba(237, 134, 31, 1);
    border-radius: 2rpx;
    width: 66rpx;
    height: 4rpx;
    margin: 12rpx 0 0 97rpx;
  }

  .image-wrapper_1 {
    border-radius: 20rpx;
    margin: 30rpx;
    overflow: hidden;
  }

  .image_3 {
    width: 100%;
  }

  .box_6 {
    width: 690rpx;
    height: 48rpx;
    margin: 28rpx 0 0 30rpx;
  }

  .text_6 {
    width: 364rpx;
    height: 40rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 4rpx;
  }

  .group_3 {
    background-color: rgba(237, 134, 31, 1);
    border-radius: 24rpx;
    width: 122rpx;
    height: 48rpx;
  }

  .image-text_2 {
    width: 75rpx;
    height: 33rpx;
    margin: 7rpx 0 0 24rpx;
  }

  .text-group_1 {
    width: 48rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 24rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 33rpx;
  }

  .image_4 {
    width: 19rpx;
    height: 21rpx;
    margin-top: 7rpx;
  }

  .text_7 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    font-weight: normal;
    text-align: left;
    line-height: 44rpx;
    /* padding: 20px; */
    box-sizing: border-box;
    margin: 28rpx 0 0 30rpx;
  }

  .text-wrapper_2 {
    height: 86rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8cdb0dae03e0ca58685ed57feb0fc22cd1027157d8cd56d06429e6395015cfa2)
      100% no-repeat;
    background-size: 100% 100%;
    width: 690rpx;
    margin: 220rpx 0 125rpx 30rpx;
    line-height: 45px;
  }

  .text_8 {
    width: 120rpx;
    height: 42rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 30rpx;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 42rpx;
    margin: 22rpx 0 0 285rpx;
  }

  .image_5 {
    width: 750rpx;
    height: 68rpx;
    margin-top: -1rpx;
  }
  //结束
  .card {
    width: 100%;
    // height: 390rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding-top: 24rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 34rpx;
    margin-top: 2rpx;

    .cardTop {
      display: flex;

      .imgs {
        width: 180rpx;
      }

      .become {
        width: 380rpx;
        height: 84rpx;
        background: #ed861f;
        border-radius: 42rpx;
        font-family: PingFang;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 84rpx;
        margin-left: 30rpx;
        margin-top: 49rpx;
        text-align: center;

        .small {
          font-size: 24rpx;
          color: #ffffff;
          line-height: 84rpx;
          opacity: 0.8;
        }
      }
    }

    .introduce {
      margin-top: 34rpx;
      font-family: PingFang;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 44rpx;
      text-align: justify;
    }

    .cardright {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      display: flex;

      .name {
        font-family: PingFang;
        font-weight: bold;
        font-size: 36rpx;
        color: #000000;
        margin-left: 31rpx;
      }

      .borline {
        width: 2rpx;
        height: 32rpx;
        background: #c7c7c7;
        margin-left: 37rpx;
        margin-top: 6rpx;
        margin-right: 37rpx;
      }
    }
  }

  .classification {
    margin-top: 20rpx;
    width: 100%;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    padding-right: 0;
    padding-left: 0;

    .tab {
      border-bottom: 2rpx #f0f0f0 solid;
    }

    .classificationTitle {
      display: flex;
      padding-left: 30rpx;
      font-family: PingFang;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;

      .leftline {
        width: 10rpx;
        height: 36rpx;
        background: #ed861f;
        border-radius: 5rpx;
        margin-right: 19rpx;
        margin-top: 4rpx;
      }
    }

    .financeTitle {
      display: flex;
      justify-content: space-between;
      font-family: PingFang;
      align-items: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      padding-left: 30rpx;
      margin-top: 51rpx;
      padding-right: 37rpx;

      .more {
        font-size: 24rpx;
        color: #999;

        .imgs {
          width: 12rpx;
          margin-left: 16rpx;
          vertical-align: middle;
          margin-top: -4rpx;
        }
      }
    }
  }

  .moreContent {
    padding: 0 30rpx;

    .moreList {
      width: 100%;
      padding: 30rpx 16rpx 30rpx 21rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 20rpx;
      display: flex;

      .imgs {
        width: 36rpx;
        height: 36rpx;
      }

      .moreRight {
        width: 431rpx;
        margin-left: 28rpx;

        .name {
          font-family: PingFang;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
          display: flex;
          justify-content: space-between;

          .nameright {
            font-family: PingFang;
            font-weight: 500;
            font-size: 26rpx;
            color: #666666;
            align-items: center;
            display: flex;

            .shoucang {
              width: 35rpx;
              margin-right: 23rpx;
              vertical-align: middle;
            }

            .suo {
              width: 22rpx;
              margin-left: 30rpx;
              margin-right: 20rpx;
            }
          }
        }

        .hite {
          margin-top: 20rpx;
          font-family: PingFang;
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          line-height: 42rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .empty {
    margin-top: 200rpx;
  }
  .sure {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 92rpx;
    background: #ed861f;
    border-radius: 16rpx;

    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 92rpx;

    .money {
      font-size: 36rpx;
      margin-right: 20rpx;
      font-weight: 500;
    }
  }
}

.maskbox {
  width: 690rpx;
  // height: 990rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .titlebox {
    position: relative;
  }

  .masktitle {
    font-family: PingFang;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    text-align: center;
    margin-top: 61rpx;
  }

  .close {
    width: 25rpx;
    position: absolute;
    right: 48rpx;
    top: 5rpx;
  }

  .daili {
    font-family: PingFang;
    font-weight: bold;
    font-size: 30rpx;
    color: #000000;
    padding: 0 99rpx;
    margin-top: 56rpx;

    .dalibottom {
      display: flex;
      justify-content: space-between;
      margin-top: 36rpx;
    }

    .smalldl {
      width: 220rpx;
      height: 110rpx;
      background: #ffffff;
      border-radius: 12rpx;
      border: 2rpx solid #d5d5d5;
      font-weight: 400;
      font-size: 30rpx;
      color: #191919;
      text-align: center;
      line-height: 50rpx;
    }

    .activebr {
      border: 2rpx solid #ed861f;
    }
  }

  .sure {
    width: 360rpx;
    height: 76rpx;
    background: #ed861f;
    border-radius: 16rpx;
    text-align: center;
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 76rpx;
    margin: 70rpx auto 54rpx;
  }
}
</style>
